<template>
  <div class="shop">
    <ul>
      <!-- 精品推荐-内容 -->
      <router-link
        tag="li"
        :to="{ path: '/detail', query: { id: bastLists.id } }"
        v-for="bastLists in bastList"
        :key="bastLists.id"
      >
        <img :src="`${bastLists.image}`" />
        <div class="shop-right">
          <h1 class="shop-text">{{ bastLists.store_name }}</h1>
          
          <div class="shop-money">
            <div class="top-m">￥{{ bastLists.price }}</div>
            <div class="bottom-m">
              <span>￥{{ bastLists.vip_price }}</span>
              <van-icon size="18" name="vip-card-o" />
              <span class="sales">已售:{{ bastLists.sales }}</span>
            </div>
          </div>
          <div class="shop-cart">
            <van-icon size="25" color="#ff3700" name="cart-circle-o" />
          </div>
          
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    bastList: Array,  //精品推荐-内容
  },
};
</script>

<style lang="less" scoped>
.shop {
  ul {
    width: 100%;
    font-size: 14px;
    li{
      padding: 0px 10px;
      height: 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      //图片 
      img{
        display: block;
        width: 90px;
        height: 90px;
      }
      // 商品信息
      .shop-right{
        position: relative;
        padding-left: 10px;
        width: 260px;
        .shop-text{
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .shop-money{
          margin-top: 30px;
          .top-m{
            font-size: 20px;
            color: red;
            line-height: 24px;
          }
          .bottom-m{
            
            .sales{
              margin-left: 10px;
              color: #b3b3b3;
            }
          }
        }
        .shop-cart{
          position: absolute;
          bottom: 10px;
          right: 10px;
        }

      }
    }
  }
}
</style>